﻿@{
    ViewBag.Title = "Index";
}

<style>
.classe
{
	border: 5px dotted Red;
}
</style>

<script type="text/javascript">

    $(document).ready(function () {
    
        $("#f a").click(function (event) {
            alert('Clicou');
            event.preventDefault();
        });

        $("#ex").click(function (event) {
            $("#novo div").first().fadeToggle(1500, function snext() {
                $(this).next("#novo div").fadeToggle(1500, snext);
            });
            event.preventDefault();
        });



        $("#oc1").click(function (event) {
            $("#novo1 div").fadeOut(1000);
            event.preventDefault();
        });

        $("#ex1").click(function (event) {
            $("#novo1 div").first().show("slow", function snext() {
                $(this).next("#novo1 div").show("slow", snext);
            });
            event.preventDefault();
        });


        $(":submit").click(function (event) {
            if ($("#f a").attr("class") == "classe")
                $("#f a").removeClass("classe");
            else
                $("#f a").addClass("classe");

            event.preventDefault();
        });

    });

</script>


<div id="f">
<h2>Ajax - Exemples</h2>

@Html.ActionLink("Artista", "Index", "Artista")

<p>
<input type="submit" value="Atualizar" />
</p>
</div>

<div id="novo">
<div>1</div>
<div style="display: none">2</div>
<div>3</div>
<div>4</div>
<div style="display: none">5</div>
<div style="display: none">6</div>
<div>7</div>
<div style="display: none">8</div>
<div>9</div>
</div>

<a href="#" id="ex">Toggle Itens</a>
<br /><br />
<div id="novo1">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>

<a href="#" id="oc1">Oculta</a><br />
<a href="#" id="ex1">Exibe</a>